<template>
  <div class="loginPage">
    <lay-form :model="form" ref="layFormRef">
      <lay-form-item>
        <div class="layui-form-item">
          <img class="logo" :src="logo">
          <div class="title" style="white-space:nowrap">Pear Admin</div>
          <div class="desc">
            Base on Layui - vue
          </div>
        </div>
      </lay-form-item>
      <lay-form-item prop="username" label="账户" required>
        <lay-input v-model="form.username" placeholder="账 户 : admin "></lay-input>
      </lay-form-item>
      <lay-form-item prop="password" label="密码" required>
        <lay-input v-model="form.password" type="password" placeholder="密 码 : admin "></lay-input>
      </lay-form-item>
      <lay-form-item >
        <lay-checkbox  v-model="form.remember" skin="primary" >记住我</lay-checkbox>
      </lay-form-item>
      <lay-form-item>
        <lay-button @click="submitClick" style="color: white">登 入</lay-button>
      </lay-form-item>
    </lay-form>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import logo from '../../assets/logo.png'
const layFormRef = ref(null);
const form = reactive({
  username: null,
  password: null,
  remember:false
})

const submitClick = () => {
  if (!layFormRef.value) {
    return
  }
  // @ts-ignore
  layFormRef.value.validate((isValidate, model, errors) => {

  });
}
</script>
<style scoped>
.loginPage {
  background-image: url('http://layui.pearadmin.com/admin/images/background.svg');
  min-width: 100vw;
  min-height: 100vh;
  background-size: cover;
  padding-top: 160px;
  box-sizing: border-box;
}

.layui-form {
  width: 320px !important;
  margin: auto !important;
}

.layui-form button {
  width: 100% !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 16px !important;
  background-color: #5FB878 !important;
  font-weight: 550 !important;
}

.layui-form-checked[lay-skin=primary] i {
  border-color: #5FB878 !important;
  background-color: #5FB878 !important;
  color: #fff !important;
}

.layui-tab-content {
  margin-top: 15px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.layui-form-item {
  margin-top: 20px !important;
}

.layui-input {
  height: 44px !important;
  line-height: 44px !important;
  padding-left: 15px !important;
  border-radius: 3px !important;
}

.layui-input:focus {
  box-shadow: 0px 0px 2px 1px #5FB878 !important;
}

.layui-form-danger:focus {
  box-shadow: 0px 0px 2px 1px #f56c6c !important;
}

.logo {
  width: 60px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-left: 20px !important;
}

.title {
  font-size: 30px !important;
  font-weight: 550 !important;
  margin-left: 20px !important;
  color: #5FB878 !important;
  display: inline-block !important;
  height: 60px !important;
  line-height: 60px !important;
  margin-top: 10px !important;
  position: absolute !important;
}

.desc {
  width: 100% !important;
  text-align: center !important;
  color: gray !important;
  height: 60px !important;
  line-height: 60px !important;
}

body {
  background-repeat: no-repeat;
  background-color: whitesmoke;
  background-size: 100%;
  height: 100%;
}

.code {
  float: left;
  margin-right: 13px;
  margin: 0px !important;
  border: #e6e6e6 1px solid;
  display: inline-block !important;
}

.codeImage {
  float: right;
  height: 42px;
  border: #e6e6e6 1px solid;
}

@media (max-width:768px) {
  body {
    background-position: center;
  }
}

.loginPage ::v-deep(.layui-form-label) {
  display: none;
}

.loginPage ::v-deep(.layui-input-block) {
  margin: 0;
}

.loginPage ::v-deep(.layui-btnk) {
  border: none;
}
</style>